<template>
    <div id="tmpl">
            <div id="desc">
                <div class="title">
                    <h4>{{photoinfo.title}}</h4>
                    <p>
                        {{photoinfo.add_time|datefmt('YYYY-MM-DD HH:mm:ss')}} {{photoinfo.click}}次浏览
                    </p>
                    <p class="line"></p>
                </div>
                <div class="mui-content">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in list">
                            <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index,list)">
                        </li>
                        
                    </ul> 
                </div>
                <p v-html="photoinfo.content"></p>
            </div>

            <div id="comment">
                <comment :id="id"></comment>
            </div>
    </div>
</template>




<script>



import {Toast} from 'mint-ui';

import con from '../../kits/common.js'

import comment from '../subcom/comment.vue';
    export default {
        components:{
            comment
        },
        data(){
            return {
                
                id:0,       //图片的ID
                photoinfo:{     //图片的详情描述数据对象
                    "id":52,
                    "title":"柳岩出席设计师好友蓝玉的高级成衣发布会",
                    "click":0,
                    "add_time":"2019-04-18T06:27:06.000Z",
                    "content":"北京四季酒店,柳岩出席设计师好友蓝玉的高级成衣发布会"
                },
                list:[
                    {
                        src:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg',
                        w:600,
                        h:400
                    },{
                        src:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg',
                        w:600,
                        h:400
                    },{
                        src:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg',
                        w:600,
                        h:400
                    },{
                        src:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg',
                        w:600,
                        h:400
                    }
                ]

            }
        },
        created(){
            this.id = this.$route.params.id;

            this.getinfo();

            this.getimgs()
        },
        methods:{
            getimgs(){
                var url = con.base + "/api/getthumimages/"+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    array.forEach(item => {
                        var img = document.createElement('img');
                        item.w = img.width;
                        item.h = img.height;
                        item.src = img.src;
                    });
                    this.photoinfo = res.body.message[0];
                })
            },
            getinfo(){
                var url = con.base + "/api/getimageInfo/"+ this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }

                    this.photoinfo = res.body.message[0];
                })

            }
        }
    }
</script>

<style scoped>

    #desc{
        padding: 10px;
    }

    #desc h4{
        color: #0094ff;

    }

    #desc .title p{
        color: rgba(0, 0, 0, 0.4);
        margin-top: 10px;
    }

    #desc .title .line{
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    }

    .mui-grid-view.mui-grid-9{
      background-color: #fff;
      border-top: none;
    border-left: none;
  }
  .mui-grid-view.mui-grid-9 .mui-media{
      border-right: none;
    border-bottom: none;
  }
   
    .mui-icon-home:before,
    .mui-icon-chatbubble:before,
    .mui-icon-location:before,
    .mui-icon-search:before,
    .mui-icon-phone:before,
    .mui-icon-email:before{
        content:'';
        display: inline-block;
        width: 50px;
        height: 50px;
        background-repeat: round;

    }

    .mui-content img{
        width: 100px;
        height: 100px;
    }
</style>

